import CommonEditor from '@/components/CommonEditor';
import { PageContainer } from '@ant-design/pro-components';
import React, { useState } from 'react';

import EssayCommentCard from '@/components/EssayCommentCard';
import { Button } from 'antd';
import { MdCatalog, MdPreview } from 'md-editor-rt';
import 'md-editor-rt/lib/preview.css';

const Welcome: React.FC = () => {
  const [id] = useState('preview-only');
  const scrollElement = document.documentElement;
  let markdown = `
## 💩项目介绍
启动时间: 2025/3/23

项目名称: **毕设工坊**(bishehub.xyz)-不必担心毕设,出去看一看春天

![图片](http://localhost:8080/api/file/download/user_avatar/1/zH42KEiz-avatar.jpg)

![图片](http://localhost:8080/api/file/download/user_avatar/1/zH42KEiz-avatar.jpg)

![图片](http://localhost:8080/api/file/download/user_avatar/1/zH42KEiz-avatar.jpg)

![图片](http://localhost:8080/api/file/download/user_avatar/1/zH42KEiz-avatar.jpg)

## 😲md-editor-rt

Markdown 编辑器，React 版本，使用 jsx 和 typescript 语法开发，支持切换主题、prettier 美化文本等。

![图片](http://localhost:8080/api/file/download/user_avatar/1/zH42KEiz-avatar.jpg)

![图片](http://localhost:8080/api/file/download/user_avatar/1/zH42KEiz-avatar.jpg)

![图片](http://localhost:8080/api/file/download/user_avatar/1/zH42KEiz-avatar.jpg)

## 🤖基本演示


> 引用：《I Have a Dream》

~~~sql
-- 项目表
create table if not exists project
(
    id         bigint auto_increment comment 'id' primary key,
    title      varchar(512)                       null comment '标题',
    content    text                               null comment '内容',
    tags       varchar(1024)                      null comment '标签列表（json 数组）',
    cover       varchar(1024)                          null comment '项目图片',
    href      varchar(512)                       null comment '项目链接',
    description      varchar(512)                           null comment '描述',
    click_num   int      default 0                 not null comment '访问数',
    create_time datetime default CURRENT_TIMESTAMP not null comment '创建时间',
    update_time datetime default CURRENT_TIMESTAMP not null on update CURRENT_TIMESTAMP comment '更新时间',
    deleted   tinyint  default 0                 not null comment '是否删除'
) comment '项目' collate = utf8mb4_unicode_ci;
~~~

![图片](http://localhost:8080/api/file/download/user_avatar/1/zH42KEiz-avatar.jpg)

  `;

  return (
    <PageContainer>
      <EssayCommentCard id={1} type={'project'} />

      <div className=" pt-6 pb-6 flex-col">
        <div>ant design</div>
        <Button>点击</Button>
        <Button type="primary">Primary Button</Button>
      </div>

      <div className="flex flex-row pt-6 pb-6">
        <div>tailwindcss</div>
        <div className="basis-1/4 bg-amber-600">01</div>
        <div className="basis-1/4 bg-blue-500">02</div>
        <div className="basis-1/2 bg-amber-100">03</div>
      </div>
      <div className=" flex-col pt-6 pb-6">
        <div>emoji</div>
        <CommonEditor callback={() => {}} />
      </div>
      <div className=" flex-col pt-6 pb-6">
        <div>
          <div>markdown</div>
          <MdPreview id={id + ''} modelValue={markdown} />
          <div className={'fixed'}>
            <MdCatalog
              editorId={id + ''}
              scrollElement={scrollElement}
              scrollElementOffsetTop={80}
            />
          </div>
        </div>
      </div>
    </PageContainer>
  );
};

export default Welcome;
